<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/js/ext/resources/css/ext-all.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/ext/ext-all-dev.js"></script>

</head>
<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a href="http://www.quizzpot.com/2009/11/que-es-el-xtype/">¿Qué
						es el “xtype”?</a>
				</h2>
				<span class="smalltext">Nov 03, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/11/que-es-el-xtype/#comments"
					title="Comment on ¿Qué es el “xtype”?">12 Comments</a>
				</span>
				<p>Cuando iniciamos nuestro aprendizaje con ExtJS vemos algunos
					conceptos que no entendemos, uno de estos es el xtype, existe una
					confusión sobre lo que en realidad es esta propiedad, para que
					sirve y en que escenarios conviene utilizarla.</p>
			</div>
			<div class="tns">
				<div>
					<a href="http://www.quizzpot.com/2009/11/que-es-el-xtype/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/11/xtype-tns.jpg"
						alt="¿Qué es el “xtype”?"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix"></p>
		</div>


		<p>En este tutorial veremos el uso adecuado de la propiedad
			“xtype”, trataremos de explicar de la mejor manera las diferencias,
			las ventajas y sobre todo el uso correcto de esta configuración.</p>
		<h3>Definición</h3>
		<p>
			En simples palabras, el xtype es un nombre simbólico que se le asigna
			a un componente o bien es un atajo o nombre corto asignado a cada
			componente <span style="text-decoration: line-through;">para
				crearlo de manera “lazy”</span>.
		</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span>{&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;xtype:&nbsp;<span
						class="string">"panel"</span><span>,&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300,&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;250,&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;html:&nbsp;<span
						class="string">"I’m&nbsp;a&nbsp;lazy&nbsp;Panel"</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">{
	xtype: "panel",
	width: 300,
	height: 250,
	html: "I’m a lazy Panel"
}
</pre>
		<h3>¿Cuál es la manera “lazy”?</h3>
		<p>Antes de que apareciera la versión 2.0, para crear un
			componente necesitabas crear una instancia de éste utilizando el
			operador “new”, luego podías renderizarlo o asignárselo a otro
			componente, esto nos ocasionaba un problema que describiré a
			continuación.</p>
		<p>Imagina que necesitas tener veinte “Tabs” en una pantalla,
			antes de la versión 2.0 tenías que crear veinte instancias del
			componente Panel y luego asignárselas al “TabPanel” para que este las
			“renderice”, el problema aquí es que un solo “Tab” se visualiza a la
			vez y crear veinte instancias es un desperdicio de memoria ya que
			posiblemente el usuario de tu aplicación solamente utilizará una o
			dos pestañas, además de que el rendimiento de tu aplicación se verá
			afectado.</p>
		<p>
			¿Por qué no ir creando cada “Tab” cuando se necesite? Para solucionar
			este problema en la versión de ExtJS 2.0 aparece el concepto de
			“xtype”, permitiéndonos crear los componentes <span
				style="text-decoration: line-through;">de una manera “lazy”,
				en otras palabras permitiéndonos ir creando los componentes justo
				cuando sean desplegados en pantalla</span>.
		</p>
		<p>
			En realidad ExtJS no nos permite inicializar nuestros componentes de
			manera “lazy” por defecto al utilizar el “xtype”, de acuerdo con <a
				href="http://www.extjs.com/deploy/dev/docs/?class=Ext.Component">la
				documentación</a> y con la <a
				href="http://www.extjs.com/learn/Tutorials:xtype_defined">WIKI
				oficial</a> si es posible, pero la realidad es otra, gracias a nuestro
			amigo <a href="http://fcargoet.evolix.net/">Florian Cargoet</a> por
			señalarnos este error.
		</p>
		<h3>¿Cómo puedo mejorar el rendimiento de mi aplicación?</h3>
		<p>
			Ya que utilizando “xtype” sucede exactamente lo mismo que si
			crearamos instancias de los componentes una por una, ¿cómo podríamos
			mejorar el rendimiento de nuestra aplicación? una solución es ir
			cargando los componentes via Ajax, aqui es donde es realmente útil el
			uso de “xtype”, para mayor información sobre esta técnica te
			recomiendo leer el <a
				href="http://www.extjs.com/forum/showthread.php?p=107427#post107427">siguiente
				post</a>, más adelante hablaré a detalle sobre esto.
		</p>
		<h3>Ventajas de utilizar la configuración xtype</h3>
		<p>
			En el ejemplo anterior se ha mostrado la principal ventaja de
			utilizar el “xtype”, y es el hecho de ir creando nuestros objetos <span
				style="text-decoration: line-through;">justo cuando lo
				necesitamos, esto nos permite mejorar el rendimiento de nuestras
				aplicaciones, mejorará considerablemente el tiempo en que se cargan
				nuestras pantallas, especialmente si estamos utilizando muchos
				componentes</span>.
		</p>
		<p>Otra ventaja es que escribiremos menos código, eso significa
			que al comprimir nuestros archivos JS resultarán un poco más ligeros,
			quizá no es mucha la diferencia pero si hay que tomarlo en cuenta.</p>
		<h3>Creación de nuestro propio “xtype”</h3>
		<p>ExtJS cuenta con varios componentes los cuales tienen su propio
			“xtype” definido, pero muchas veces nosotros decidimos crear una
			extensión o componente el cual deberíamos asignarle su propio
			“xtype”, esto es posible y es muy sencillo de realizar ya que
			únicamente necesitas hacer lo siguiente:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Registrar&nbsp;xtype</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>Ext.reg(<span class="string">"xtype"</span><span>,Application.MyComponente);&nbsp;&nbsp;</span></span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Registrar xtype
Ext.reg("xtype",Application.MyComponente);
</pre>
		<p>De esta manera podrías crear instancias de tu componente de
			manera “lazy”.</p>
		<h3>Conclusiones</h3>
		<p>
			Una vez que tenemos claro el uso del “xtype” es recomendable
			utilizarlo siempre que nos sea posible, ya hemos visto las ventajas
			de utilizarlo y creo que nos beneficiará considerablemente en el
			desarrollo de nuestras aplicaciones, podemos encontrar los “xtype”
			disponibles en <a
				href="http://www.extjs.com/deploy/dev/docs/?class=Ext.Component">la
				documentación</a>.
		</p>
		<p>
			Si tienes alguna duda, comentario o sugerencia por favor háznoslo
			llegar mediante el formulario en la parte inferior, no olvides
			seguirnos en <a href="http://twitter.com/quizzpot">Twitter
				(@quizzpot)</a> para estar al tanto de las actualizaciones en el sitio.
		</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323238703225&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F11%2Fque-es-el-xtype%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F11%2Fque-es-el-xtype%2F&amp;text=%C2%BFQu%C3%A9%20es%20el%20%E2%80%9Cxtype%E2%80%9D%3F%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F11%2Fque-es-el-xtype%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F11%2Fque-es-el-xtype%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>

	<br />
	<a href="http://www.quizzpot.com/2009/11/que-es-el-xtype/">referencia</a>
	<br />
	<br />
	<a href="${pageContext.request.contextPath}/menu.jsp">regresar</a>
</body>
</html>